<template>
	<view>
		<u-navbar :back-icon-size="40" :is-back="true" :border-bottom="false">
			<view style="width: 100%;">
				<u-row>
					<u-col span="12" class="u-line-1" style="padding: 6rpx 10rpx 0;">
						<u-icon imgBorderRadius="100" size="56" margin-left="10" label-size="26" :name="articleInfo.avatarurl"
							:label="articleInfo.author"></u-icon>
					</u-col>
				</u-row>
			</view>
			<view slot="right" style="padding: 0 30rpx;">
				<u-icon name="plus" size="24" label-size="24" label="关注" color="#ff9900" label-color="#ff9900"
					:custom-style="careBtnStyle">
				</u-icon>
			</view>
		</u-navbar>

		<view>
			<u-swiper style="padding: 0 30rpx;" height="800" mode="tow" img-mode="aspectFill" bg-color="#ffffff"
				indicator-pos="topRight" :autoplay="false" :list="articleInfo.imageList" @click="imgListPreview()">
			</u-swiper>
			<u-row style="padding: 20rpx 30rpx;">
				<u-col span="12" style="padding: 0;">
					<text class="u-line-1 u-font-15"
						style="color: #555555;font-weight: bold;">{{articleInfo.title}}</text>
				</u-col>
				<u-col span="12" class="descTxt">
					<text class="u-font-14">
						{{articleInfo.desc}}
					</text>
				</u-col>
			</u-row>
			<u-row style="padding: 0rpx 30rpx;">
				<u-col span="6" style="padding: 0;color: #7e7e7e;">
					<text class="u-font-12">
						{{articleInfo.date}}
					</text>
				</u-col>
				<u-col span="6" text-align="right">
					<!-- <u-icon name="heart"></u-icon> -->
					<u-icon name="heart-fill" size="30" color="#fa3534"></u-icon>
				</u-col>
			</u-row>
			<u-row style="padding: 20rpx 30rpx;">
				<u-col span="12" style="padding: 0;">
					<u-gap height="1" bg-color="#f7f7f8"></u-gap>
				</u-col>
			</u-row>
		</view>

		<view class="comment" v-for="(res, index) in commentList" :key="res.id">
			<view class="left">
				<image :src="res.url" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="top">
					<view class="name">{{ res.name }}</view>
					<view class="like" :class="{ highlight: res.isLike }">
						<view class="num">{{ res.likeNum }}</view>
						<u-icon v-if="!res.isLike" name="heart" :size="30" color="#9a9a9a" @click="getLike(index)">
						</u-icon>
						<u-icon v-if="res.isLike" name="heart-fill" :size="30" @click="getLike(index)"></u-icon>
					</view>
				</view>
				<view class="content">{{ res.contentText }}</view>
				<view class="data-info" :style="!res.hasAuthorReply?'margin:10px 0 0':''">
					<text class="reply-info reply-btn" @tap="toAllReply(res.allReply)">
						{{res.allReply==0?'回复':res.allReply+'回复'}}
						<u-icon name="arrow-right" size="20"></u-icon>
					</text>
					<text class="reply-info">
						{{ res.date }}
					</text>
				</view>
				<view class="reply-box">
					<block v-if="res.hasAuthorReply">
						<block v-for="(item, index) in res.replyList" :key="item.index">
							<view class="item" v-if="item.isAuthor">
								<view class="text contentStr u-line-3">
									<text style="color: #555; font-weight: bold;">{{ item.name }}</text>
									<u-tag class="aur-tag" text="作者" mode="plain" size="mini" type="warning" />
									: {{ item.contentStr }}
								</view>
							</view>
						</block>
						<view class="all-reply" @tap="toAllReply(res.allReply)" v-if="res.replyList != undefined">
							查看全部{{ res.allReply }}条回复
						</view>
					</block>
				</view>
			</view>
		</view>

		<view class="cu-bar foot input">
			<u-row style="width: 100%;">
				<u-col span="8.1">
					<u-search search-icon="edit-pen" placeholder="拉近彼此的距离~从评论开始!" input-align="left"
						:show-action="false" :adjust-position="true">
					</u-search>
				</u-col>
				<u-col span="1.3" text-align="center">
					<u-icon name="heart" size="46" color="#777777"></u-icon>
				</u-col>
				<u-col span="1.3" text-align="center">
					<u-icon name="star" size="46" color="#777777"></u-icon>
				</u-col>
				<u-col span="1.3" text-align="center">
					<u-icon name="zhuanfa" size="46" color="#777777"></u-icon>
				</u-col>
			</u-row>
		</view>
		<!-- <u-tabbar></u-tabbar> -->

		<u-modal v-model="showModal" :content="contentModal" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModal: false,
				contentModal: '兄嘚！不要因为我长得帅，就这样一直看着我！默默的喜欢就好了！',
				careBtnStyle: {
					"border": "1px solid #ff9900",
					"padding": "9rpx 12rpx",
					"border-radius": "40rpx"
				},

				commentList: [],
				articleInfo: {
					id: this.$u.guid(),
					like: 7891,
					cate: "Vlog",
					author: '一颗豆芽儿',
					date: "2021年7月22日",
					title: '分享，也可以带来快乐！',
					desc: "快帮主，一个致力于成为你生活助手的App。我们愿与你一同分享，给你带来更多的快乐！",
					avatarurl: "/static/msgIcon/kbz.png",
					imageList: [
						'/static/Lives/live3.jpg',
						'/static/Lives/live4.jpg'
					]
				}
			};
		},
		onLoad() {
			this.getComment();
		},
		methods: {
			//图片预览
			imgListPreview() {
				if (this.articleInfo.imageList) {
					uni.previewImage({
						indicator: "default",
						loop: true,
						urls: this.articleInfo.imageList
					});
				} else {
					this.contentModal = "预览图片加载失败，请稍后再试！";
					this.showModal = true;
				}
			},
			// 跳转到全部回复
			toAllReply(_allReply) {
				if (_allReply && _allReply > 0) {
					uni.navigateTo({
						url: '/pages/bbs/indexBBS/reply'
					});
				} else {
					this.showModal = true;
				}
			},
			// 点赞
			getLike(index) {
				this.commentList[index].isLike = !this.commentList[index].isLike;
				if (this.commentList[index].isLike == true) {
					this.commentList[index].likeNum++;
				} else {
					this.commentList[index].likeNum--;
				}
			},
			// 评论列表
			getComment() {
				this.commentList = [{
						id: 1,
						name: '豆豆',
						date: '12-25 18:58',
						contentText: '呐呐！这是妈妈给我买的小花衣，很喜欢！以后我要每次出门，都要穿在身上！',
						url: '/static/msgIcon/baby.png',
						allReply: 12,
						likeNum: 33,
						isLike: false,
						hasAuthorReply: true,
						replyList: [{
								isAuthor: false,
								name: '一颗豆芽儿',
								contentStr: '有问题，就找快帮主。一个致力于成为你生活助手的App，解你所难、解你之惑。我们愿与你一同分享，给你带来更多的快乐！'
							},
							{
								isAuthor: true,
								name: '一颗豆芽儿',
								contentStr: '这是妈妈给我买的小花衣，很喜欢！以后我要每次出门，都要穿在身上！'
							}
						]
					},
					{
						id: 2,
						name: 'Lily',
						date: '01-25 13:58',
						contentText: '豆豆穿上这件小花衣，真的不要太好看，超级棒棒哒！',
						allReply: 0,
						likeNum: 11,
						isLike: false,
						url: '/static/msgIcon/mom.jpg',
					},
					{
						id: 3,
						name: '快帮主',
						date: '03-25 13:58',
						contentText: '点赞+1',
						allReply: 0,
						likeNum: 21,
						isLike: false,
						allReply: 2,
						hasAuthorReply: true,
						url: '../../../static/logo.png',
						replyList: [{
							isAuthor: true,
							name: '一颗豆芽儿',
							contentStr: '这是妈妈给我买的小花衣，很喜欢！以后我要每次出门，都要穿在身上！'
						}, {
							isAuthor: false,
							name: 'Murphy',
							contentStr: '喜欢我，就关注一下我吧！'
						}]
					},
					{
						id: 4,
						name: '川蜀鄂余',
						date: '06-20 13:58',
						contentText: '这是见过最好看、最搭的风格了，真的好喜欢，求告知连接！',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 0,
						likeNum: 150,
						isLike: false
					}
				];
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "footBar.css";

	.descTxt {
		padding: 13rpx 0 0 !important;
		color: #555555;
		letter-spacing: 0.05rem;
	}

	.aur-tag {
		margin: 0 10rpx 0;
		letter-spacing: 2rpx;
		border: none;
		// padding: 2rpx 8rpx;
		// font-size: 9px;
	}

	.reply-info {
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}

	.reply-btn {
		background-color: #f4f5f5;
	}

	.comment {
		display: flex;
		padding: 14rpx 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 28rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					// color: #5677fc;
					color: #333333;
					font-weight: bold;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
				letter-spacing: 0.05rem;
			}

			.reply-box {
				// background-color: rgb(242, 242, 242);
				background-color: #fbfbfb;
				border-radius: 12rpx;

				.item {
					padding: 20rpx 20rpx 0;
					// border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}

					.contentStr {
						font-size: 26rpx;
						line-height: 1.6;
						letter-spacing: 0.03rem;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					// color: #5677fc;
					font-weight: bold;
					align-items: center;
					letter-spacing: 0.04rem;
					font-size: 26rpx;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.data-info {
				margin: 20rpx 0;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 20rpx;
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
